<template>
    <div class="history-container">
        <el-form ref="refSeach" :inline="true" :model="form" size="mini">
            <el-row>
                <el-col :span="12">
                    <el-form-item label-width="100px" prop="JJBH" label="关联编号" :span="12">
                        <el-input v-model="form.JJBH" placeholder="请输入..."></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item style="margin-left: 20px">
                        <el-button type="primary" @click="onSearch" icon="el-icon-search" size="small">查询</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table
			:data="tableData"
			:default-sort="{ prop: 'name', order: 'descending' }"
			size="medium"
			style="width: 100%"
            height="400px"
			highlight-current-row
		>
            <el-table-column align="center" property="AJMC" sortable label="案件名称" />
			<el-table-column align="center" property="ASJBH" sortable label="案件编号" />
			<el-table-column align="center" property="JJBH" sortable label="关联编号" show-overflow-tooltip />
			<el-table-column align="center" property="AJLBDM" sortable label="案件类别" show-overflow-tooltip>
                <template #default="scope">
					{{ ajlbs.find(v=>v.code == scope.row.AJLBDM)?.label }}
				</template>
            </el-table-column>
            <el-table-column align="center" sortable label="案发时间" show-overflow-tooltip>
				<template #default="scope">
					{{ dateFormat(scope.row.FXASJSJ) }}
				</template>
			</el-table-column>
			<el-table-column align="center" property="ZBR_XM" sortable label="主办人" show-overflow-tooltip />
			<el-table-column align="center" property="BADW_GAJGMC" sortable label="主办单位" show-overflow-tooltip />
			<el-table-column align="center" label="操作" width="145">
				<template #default="scope">
					<el-button type="primary" @click="useHistory(scope.row)" plain size="mini">复用</el-button>
				</template>
			</el-table-column>
		</el-table>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { dateFormat } from '/@/common';
import { ElMessage } from 'element-plus';
import { queryCaseHistory } from '/@/api/case/index';
const props = defineProps({
    ajlbs:Array
});
console.log(props.ajlbs);
const emits = defineEmits(['succ'])
const form = ref({
    ASJBH:"",
    JJBH:"",
    XCKYBH:""
 });
 const tableData = ref([])
 const refSeach = ref();
function onSearch() {
    if(form.value.ASJBH == "" && form.value.JJBH == "" && form.value.XCKYBH == ""){
        ElMessage({ message: '请输入查询条件', type: 'warning' });
        return 
    }
    queryCaseHistory(form.value).then((res:any) => {
        if (res.success) {
            tableData.value = res.data;
        }else{
            ElMessage({ message: '关联编号不存在', type: 'warning' });
        }
    })
}
function onRest(){
    refSeach.value.resetFields();
}
function useHistory(row:any){
    emits("succ",row);
}
</script>